原生JS实现简单动态轮播（二）

先看布局的代码：

<div class="banner">
   <ul class="clear" style="left:-100%;" >
        <li><img src="yy.jpg"></li>
        <li><img src="3.jpg"></li>
        <li><img src="5.jpg"></li>
        <li><img src="yy.jpg"></li>
        <li><img src="3.jpg"></li>
    </ul>
    <div class="pageNav"></div>
    <div class="leftBtn"></div>
    <div class="rightBtn"></div>
</div>

可以看出这个轮播和我的前一篇轮播，布局的思路稍微不同。无缝轮播只放需要的图片，轮播时所看到的两张图片的left都改变。而这个轮播是把ul的宽设为所有图片加起来的长度，轮播时移动ul的left，并在第一张图片前放置最后一张图片，最后一张图片后放置第一张图片。

布局大体也一样，就是重点便是ul设置为500%。

.clear:after{
    display:block;
    content:"";
    clear:both;
}
.banner{
    position:relative;
    width: 100%;
    height: 500px;
    overflow:hidden;
}
.banner ul{
    list-style-type:none;
    position:relative;
    width: 500%;
    height:  500px;
}
.banner ul li{
    float: left;
    width: 20%;
}
.pageNav{
    position: absolute;
    left:50%;
    bottom:20px;
    transform: translateX(-50%);
}
.pageNav a{
    display:inline-block;
    margin:0 5px;
    width: 20px;
    height: 20px;
    background-color:#fff;
    border-radius:50%;
    border:2px solid #000;
    cursor:pointer;
}
.pageNav a.cur{
    background-color:red;
}
.leftBtn, .rightBtn{
    position:absolute;
    top: 50%;
    transform:translateY(-50%);
    width: 40px;
    height: 50px;
    background-color:rgba(0, 0, 0, 0.5);
    cursor:pointer;
}
.leftBtn{
    left:0;
}
.rightBtn{
    right:0;
}
.leftBtn:hover,.rightBtn:hover{
    background-color:rgba(0, 0, 0, 0.8);
}

接下来是js部分，思路也很相似，移动的元素不一样。

//先获取所需要的dom元素
var banner=document.getElementsByClassName("banner")[0], ul=banner.getElementsByTagName("ul");[0]
var li=ul.getElementsByTagName("li");
var pageNav=banner.getElementsByClassName("pageNav")[0];
var leftBtn=banner.getElementsByClassName("leftBtn")[0],rightBtn=banner.getElementsByClassName("rightBtn")[0];
        var n=0,timerElem,animate=false;
//添加分页按钮
        for(var i=0;i<li.length-2;i++){
            var pageA=document.createElement("a");
            if(i==0){
                pageA.className="cur";
            }
            pageNav.appendChild(pageA);
        }
        pageNav.addEventListener('click',pageNavClick,false);
        function pageNavClick(e){
            e=e||window.event;//兼容性考虑
            for(var j=0;j<li.length-2;j++){
                if(pageNav.children[j]==e.target){
                    var offset=(j-n)*(-100);
                    btnShow(j);
                    n=j;
                    showImg(offset);
                }
            }
        }
 //分页按钮函数
        function btnShow(index){
            for(var a=0;a<li.length-2;a++){
                pageNav.children[a].className="";
            }
            pageNav.children[index].className="cur";
        }
        function showImg(offset){
            clearInterval(timerElem);//记得清除计时器，要不然多个计时器叠加，效果会出现问题。
            var speed=offset/20;
            var newLeft=parseInt(ul.style.left)+offset;
            timerElem=setInterval(function(){
                if(parseInt(ul.style.left)==newLeft){
                    clearInterval(timerElem);
                    // 当第三张开始滑动时，屏幕接着它滑动的是放置在它后面的假的第一张，所以滑动结束之后要把位置从转回真的第一张
                    if(n==0){
                            ul.style.left="-100%";
                        }else if(n==li.length-3){
                            ul.style.left=(-100)*(li.length-2)+"%";
                        }else{
                            ul.style.left=newLeft+"%";
                        }
                    animate=false;
                } else{
                    animate=true;
                     ul.style.left=parseInt(ul.style.left)+speed+"%";
                }
            },50)
        }
        rightBtn.onclick=function(){
            if(animate){
                return;
            }
            n++;
            if(n>=li.length-2){
                n=0;
            }
            btnShow(n);
            showImg(-100);
        }
        leftBtn.onclick=function(){
            if(animate){
                return;
            }
            n--;
            if(n<0){
                n=li.length-3;
            }
            btnShow(n);
            showImg(-100);
        }
        var timer=setInterval(autoLunbo,3000);
        function autoLunbo(){
            rightBtn.onclick();
        }
        banner.onmouseover=function(){
            clearInterval(timer);
        }
        banner.onmouseout=function(){
            timer=setInterval(autoLunbo,3000);
        }